<template>
  <div class="app">
    <router-view v-slot="{ Component }" :key="$route.fullPath">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
// App.vue 作为根组件，主要负责布局和路由视图的渲染
</script>

<style lang="scss">
.app {
  max-width: 600px;
  min-height: 100vh;
  background-color: #ffffff;
  margin: 0 auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>